<template>
	<view class="nav-box">
		<view class="title" v-if="showType">
			<image class="logo" src="@/static/img/logo.png" mode="widthFix" @click="onClickGoHome"></image>
			<text>·</text>
			<view class="option-area" @click="showArea = true">{{areaText}}
				<image class="option" src="@/static/img/sj.png" mode="widthFix"></image>
			</view>
			<!-- 选择加油站弹窗 -->
			<van-popup v-model:show="showArea" round position="bottom">
				<van-picker :columns="areaList" @cancel="showArea = false" @confirm="onConfirmArea" />
			</van-popup>
		</view>
		<view v-else>

		</view>
	</view>

</template>

<script>
	import {
		reactive,
		toRefs,
		watchEffect,
		watch,
		onMounted
	} from 'vue'
	import $store from "@/store";
	import api from '@/api/index.js'
	export default {
		props: {
			showType: {
				type: Number,
				default: 0
			}
		},
		setup(props, ctx) {
			const data = reactive({
				areaList: [],
				areaText: '',
				areaId: '',
				showArea: false,
				showType: props.showType,
				userInfo: {}
			})
			watchEffect(() => {
				data.areaId = $store.state.areaId;
				// data.funcDatas = props.funcData
				// data.showType = props.showType
				// if($store.state.stationList) {
				// 	data.areaList = [];
				// 	$store.state.stationList.forEach(val => {
				// 		data.areaList.push({
				// 			text: val.name,
				// 			value: val.deptId
				// 		})
				// 	})
				// }
			})
			// watch($store.state, (newVal, oldVal) => {
			// 	if(newVal.areaId) {
			// 		$store.commit('setAreaId', newVal.areaId);
			// 	}
			// }, {
			// 	deep: true
			// })
			// 初始化数据
			const init = () => {
				data.userInfo = uni.getStorageSync('userInfo')
				api.store({
					userId: data.userInfo.userId
				}).then(res => {
					data.areaList = []
					res.data.forEach(val => {
						data.areaList.push({
							text: val.name,
							value: val.deptId
						})
					})
					// 默认选择第一个油站
					setTimeout(()=>{
						if (data.areaList.length > 0) {
							data.areaText = data.areaList[0].text;
							data.areaId = data.areaList[0].value;
							$store.commit('setAreaId', data.areaId);
							$store.commit('setAreaText', data.areaText);
						}
					},300)

				})

			}
			const setArerId = () => {
				if (!$store.state.areaId) {
					init();
					$store.commit('setAreaId', data.areaId);
					$store.commit('setAreaText', data.areaText);
				} else {
					data.userInfo = uni.getStorageSync('userInfo')
					api.store({
						userId: data.userInfo.userId
					}).then(res => {
						data.areaList = []
						res.data.forEach(val => {
							data.areaList.push({
								text: val.name,
								value: val.deptId
							})
						})
						// 默认选择第一个油站
						data.areaId = data.areaList[0].value;
						data.areaList.forEach(val => {
							if (val.value == $store.state.areaId) {
								data.areaText = val.text;
								data.areaId = val.value;
							}
						})
					})
				}
			}
			onMounted(() => {
				setArerId();
			})
			const onConfirmArea = ({
				selectedOptions
			}) => {
				data.showArea = false;
				data.areaText = selectedOptions[0].text;
				data.areaId = selectedOptions[0].value;
				$store.commit('setAreaId', data.areaId);
				$store.commit('setAreaText', data.areaText);
				ctx.emit('changeArea')
			}
			// 跳转路劲
			const onClickTo = (url) => {
				uni.navigateTo({
					url
				})
			}
			const onClickGoHome = () => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
			return {
				...toRefs(data),
				onConfirmArea,
				onClickTo,
				onClickGoHome,
				init,
				setArerId
			}
		}
	}
</script>

<style lang="less" scoped>
	.nav-box {
		position: static;
		left: 0;
		top: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			height: 100%;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
			box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);

			.logo {
				width: 60rpx;
				margin-left: 20rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: 700;
			}

			.option-area {
				font-size: 30rpx;

				.option {
					width: 20rpx;
					// margin-top: -12rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>